<template>
  <div>
    <a-row :gutter="24" class="qc-top-card">
      <a-col :xl="6">
        <a-card :bordered="false" title="访问量">
          <a-tag slot="extra" color="green">日</a-tag>
          <div>
            <span class="qc-qnalysis-top-card-numeral" style="font-size: 30px;">25,848</span>
            <div class="qc-qnalysis-top-card-content">
              <span class="qc-mr-16" style="display: inline-block;">
                日同比
                <div class="qc-trend qc-trend-up qc-trend-colorful">
                  <span class="qc-trend-text">12.5%</span>
                </div>
              </span>
              <span style="display: inline-block;">
                周同比
                <div class="qc-trend qc-trend-down qc-trend-colorful">
                  <span class="qc-trend-text">5%</span>
                </div>
              </span>
            </div>
            <a-divider class="qc-qnalysis-top-card-divider" style="margin: 8px 0;" />
            <a-row>
              <a-col :span="12">总访问量</a-col>
              <a-col :span="12" class="qc-qnalysis-top-card-footer-value">168万</a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <a-col :xl="6">
        <a-card :bordered="false" title="销售额">
          <a-tag slot="extra" color="blue">月</a-tag>
          <div>
            <span class="qc-qnalysis-top-card-numeral">¥12,888</span>
            <div class="qc-qnalysis-top-card-content">
              <a-progress :percent="60" status="active" :show-info="false" />
            </div>
            <a-divider class="qc-qnalysis-top-card-divider" />
            <a-row>
              <a-col :span="12">总销售额</a-col>
              <a-col :span="12" class="qc-qnalysis-top-card-footer-value">68万</a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <a-col :xl="6">
        <a-card :bordered="false" title="订单数">
          <a-tag slot="extra" color="pink">周</a-tag>
          <span class="qc-qnalysis-top-card-numeral">1,688</span>
          <div class="qc-qnalysis-top-card-content">
            <a-progress :percent="100" :show-info="false" />
          </div>
          <a-divider class="qc-qnalysis-top-card-divider" />
          <a-row>
            <a-col :span="12">成交率</a-col>
            <a-col :span="12" class="qc-qnalysis-top-card-footer-value">100%</a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :xl="6">
        <a-card :bordered="false" title="新增用户">
          <a-tooltip slot="extra" placement="top">
            <template slot="title">
              <span>指标说明</span>
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
          <span class="qc-qnalysis-top-card-numeral">168</span>
          <div class="qc-qnalysis-top-card-content">
            <a-progress :percent="100" :show-info="false" />
          </div>
          <a-divider class="qc-qnalysis-top-card-divider" />
          <a-row>
            <a-col :span="12">总用户</a-col>
            <a-col :span="12" class="qc-qnalysis-top-card-footer-value">1688</a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" class="qc-top-card">
      <a-col :xl="12" :xs="24">
        <a-card :bordered="false" class="qc-mt24">
          <div id="rainfall"></div>
        </a-card>
      </a-col>
      <a-col :xl="12" :xs="24">
        <a-card :bordered="false" class="qc-mt24">
          <div id="gdp"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { GroupedColumn, StepLine } from "@antv/g2plot";
import gdpData from "./gdp.json";
const rainfallData = [
  {
    name: "宜昌",
    月份: "一月",
    月均降雨量: 18.9
  },
  {
    name: "宜昌",
    月份: "二月",
    月均降雨量: 28.8
  },
  {
    name: "宜昌",
    月份: "三月",
    月均降雨量: 39.3
  },
  {
    name: "宜昌",
    月份: "四月",
    月均降雨量: 81.4
  },
  {
    name: "宜昌",
    月份: "五月",
    月均降雨量: 47
  },
  {
    name: "宜昌",
    月份: "六月",
    月均降雨量: 20.3
  },
  {
    name: "宜昌",
    月份: "七月",
    月均降雨量: 24
  },
  {
    name: "宜昌",
    月份: "八月",
    月均降雨量: 35.6
  },
  {
    name: "荆州",
    月份: "一月",
    月均降雨量: 12.4
  },
  {
    name: "荆州",
    月份: "二月",
    月均降雨量: 23.2
  },
  {
    name: "荆州",
    月份: "三月",
    月均降雨量: 34.5
  },
  {
    name: "荆州",
    月份: "四月",
    月均降雨量: 99.7
  },
  {
    name: "荆州",
    月份: "五月",
    月均降雨量: 52.6
  },
  {
    name: "荆州",
    月份: "六月",
    月均降雨量: 35.5
  },
  {
    name: "荆州",
    月份: "七月",
    月均降雨量: 37.4
  },
  {
    name: "荆州",
    月份: "八月",
    月均降雨量: 42.4
  }
];

export default {
  name: "Analysis",
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.renderRainfallChart();
    this.renderGdpChart();
  },
  methods: {
    renderRainfallChart() {
      const columnPlot = new GroupedColumn(
        document.getElementById("rainfall"),
        {
          title: {
            visible: true,
            text: "分组柱状图"
          },
          forceFit: true,
          data: rainfallData,
          xField: "月份",
          yField: "月均降雨量",
          yAxis: {
            min: 0
          },
          label: {
            visible: true
          },
          groupField: "name",
          color: ["#1ca9e6", "#f88c24"]
        }
      );
      columnPlot.render();
    },
    renderGdpChart() {
      const gdp = new StepLine(document.getElementById("gdp"), {
        title: {
          visible: true,
          text: "2000 ~ 2018 年各国家 GDP 趋势对比"
        },
        description: {
          visible: true,
          text:
            "图形标签 (label) 位于折线尾部，用于标注整根阶梯折线，并有带有排名的含义在其中。"
        },
        padding: [20, 100, 30, 80],
        forceFit: true,
        data: gdpData,
        xField: "year",
        yField: "gdp",
        seriesField: "name",
        xAxis: {
          type: "dateTime",
          label: {
            visible: true,
            autoHide: true
          }
        },
        yAxis: {
          formatter: v => `${(v / 10e8).toFixed(1)} B`
        },
        legend: {
          visible: false
        },
        label: {
          visible: true,
          type: "line"
        }
      });

      gdp.render();
    }
  }
};
</script>
<style>
.qc-qnalysis-top-card-numeral {
  font-size: 30px;
}
.qc-mt24 {
  margin-top: 24px;
}

.qc-qnalysis-top-card-content {
  padding-top: 8px;
  height: 42px;
}

.qc-qnalysis-top-card-divider {
  margin: 8px 0;
}

.qc-qnalysis-top-card-footer-value {
  text-align: right;
}

.qc-mr-16 {
  margin-right: 16px;
}

.qc-trend {
  display: inline-block;
}
.qc-trend-text {
  vertical-align: middle;
}

.qc-top-card .ant-card-body {
  padding: 12px;
}
</style>

